<template>
  <div style="display: flex; flex-direction: column">
    <div
      style="
        width: 250px;
        background: purple;
        color: white;
        height: 20px;
        text-align: center;
        line-height: 20px;
        padding: 5px 0;
      "
    >
      音频播放
    </div>
    <div
      style="
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 190px;
        align-items: center;
        justify-content: center;
        background: black;
        color:white;
      "
    >
     <div style="display: flex; align-items: center">
        <div>延时</div>
        <div
          type="text"
          disabled
          style="
            width: 100px;
            height: 20px;
           background:grey;
            margin-left:10px;
            overflow:hidden;
          "
         
        >{{delay}}</div>
      </div>
      <div style="display: flex; align-items: center">
        <div>音频文件</div>
        <div
          type="text"
          disabled
          style="
            width: 100px;
            height: 20px;
           background:grey;
            margin-left:10px;
            overflow:hidden;
          "
          
        >{{audioFilePath}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AudioPlayBackComponent",
  inject: ["getNode"],
  data() {
    return {
      audioFilePath: null,
      eventType: 5,
      delay:0
    };
  },
  mounted() {
    const self = this;
    const node = this.getNode();
    node.on("change:data", ({ current }) => {
      
      if (current === undefined) {
        self.audioFilePath = null;
        self.delay = 0;
        return;
      }
      self.audioFilePath = current.audioFilePath;
      self.delay = current.delay
    });
  },
};
</script>

<style>
</style>